<template>
  <div class="needSkills">
    <cpro-public title="技能需求" >
      <template v-slot:content>
        <el-select
          v-model="skills"
          multiple
          placeholder="请选择或输入需求所需的技能，如您不清楚应选择哪些技能，请留空，由竞标方为您提供所需的技能信息"
        >
          <ul v-for="(item, index) in needSkills" :key="index">
            <li class="content_title">{{ item?.name }}</li>
            <ul class="content">
              <el-option
                v-for="(item1, index1) in item?.content"
                :key="index1"
                :value="item1"
                :label="item1"
              >
              </el-option>
            </ul>
          </ul>
        </el-select>
      </template>
    </cpro-public>
  </div>
</template>

<script lang="ts" setup>
import cproPublic from '@/components/creat-projects/cpro-public.vue'
import { computed } from 'vue';
const emit = defineEmits(['updateSkills'])
type skillContentType = {
  name: string
  content: Array<string>
}
const props = defineProps({
  needSkills: {
    type: Array<skillContentType>
  },
  skillNeeds:{
    type:Array<string>,
    default:[]
  }
})
const skills = computed({
  get(){
    return props.skillNeeds
  },
  set(v:any){
      emit('updateSkills',v)
  }
})

</script>

<style lang="less" scoped>
.needSkills {
  margin: 18px 8px 18px 8px;
}
/deep/.el-input__wrapper {
  height: 40px;
}
/* 修改技能要求选择框的长度 */
.needSkills /deep/ .el-input {
  width: 1065px;
}

/* 下拉菜单每一个小标签的样式 */
li.el-select-dropdown__item {
  width: 105px;
  height: 35px;
  border-radius: 100px;
  color: #bfcdd9;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 34px;
  font-size: 13px;
  padding: 0;
  float: left;
  margin: 0 5px 10px 15px;
}
/* 修改下拉菜单的宽度 */
.is-multiple ul {
  width: 1000px;
}

/* （技能要求）清除浮动 */
div.el-scrollbar ul.content {
  overflow: hidden;
  padding-left: 22px;
}

/* 选择技能需求时每个标题的样式 */
div.el-scrollbar li.content_title {
  font-size: 14px;
  color: #000;
  border-left: 4px solid #2093e1;
  margin: 20px 0 20px 16px;
  padding-left: 12px;
  height: 20px;
  line-height: 20px;
  border-bottom: none;
}

/*隐藏技能要求选择时后面的勾  */
.el-select-dropdown__item.selected::after {
  content: '';
  display: none !important;
}
</style>
